<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  
  <style type="text/css">
    .lazy {
      width:60px;
      height: 60px;
    }
  </style>

</head>
<body>

<!--  参考地址https://github.com/jieyou/lazyload
 layzeload需要设置宽度高度，可以写在css文件里， -->

<!-- 最好把需要懒加载的img，都定义成一个类，方便使用，原理其实就是
滚动的时候把data-original的地址替换到src里面啊 -->
<img class="lazy" src="images/grey.gif" data-original="images/1.jpg" width="765" height="574">

<!-- 引入jquery，和lazyload文件 -->
<script type="text/javascript" src="jq/jquery-1.12.2.js"></script>
<script type="text/javascript" src="lazyload-master/lazyload.min.js"></script></body>

<!-- 调用lazyload -->
<script type="text/javascript">
  $(function() {
    $("img.lazy").lazyload({
      event : "sporty"
    });
  });

  $(window).bind("load", function() {
    var timeout = setTimeout(function() {
      $("img.lazy").trigger("sporty")
    }, 5000);
  });
</script>

</body>
</html>